<template>
  <form id="user-signup">
    <div class="u-form-group">
      <input type="name" placeholder="用户名" v-model="username" />
    </div>
    <div class="u-form-group">
      <input type="password" placeholder="密码" v-model="password" />
    </div>
    <div class="u-form-group">
      <input
        type="password"
        placeholder="确认密码"
        v-model="password_confirm"
      />
    </div>
    <div class="u-form-group">
      <input type="email" placeholder="邮箱" v-model="email" />
    </div>
    <div class="u-form-group">
      <button id="btn-reg" @click="registe">注册</button>
    </div>
  </form>
</template>

<script>
import axios from "axios";
export default {
  name: "Registe",
  data() {
    return {
      username: "",
      password: "",
      password_confirm: "",
      email: "",
    };
  },
  methods: {
    registe() {
      if (this.username == "" || this.password == "" || this.email == "") {
        alert("请填写完整信息");
        return;
      }
      if (this.password != this.password_confirm) {
        alert("请确认密码是否输入正确");
        return;
      }
      // 发送 POST 请求
      axios({
        method: "get",
        url: "http://127.0.0.1:8080/users/reg",
        params: {
          username: this.username,
          password: this.password,
          email: this.email,
        },
      }).then(
        (response) => {
            if(response.data.state==200){
                alert("注册成功！")
            }
            else{
                alert("注册失败!"+response.data.message)
            }

          console.log("请求成功了", response);
        },
        (error) => {
          alert("请求失败了", error.message);
        }
      );
    },
  },
};
</script>

<style scoped>
.u-form-group {
  width: 100%;
  margin-bottom: 10px;
}

.u-form-group input[type="name"],
.u-form-group input[type="password"],
.u-form-group input[type="email"] {
  width: calc(50% - 22px);
  height: 45px;
  outline: none;
  border: 1px solid #ddd;
  padding: 0 10px;
  border-radius: 2px;
  color: #333;
  font-size: 0.8rem;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.u-form-group input:focus {
  border-color: #358efb;
}

.u-form-group button {
  width: 50%;
  background-color: #1cb94e;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  padding: 14px 0;
  border-radius: 2px;
  text-transform: uppercase;
}
</style>